<template>
  <a-row :gutter="16">
    <a-col :xs="24" :sm="16">
      <a-card class="card" size="small"  style="width: 100%">
        <a-form :layout="formState.layout" :model="formState" v-bind="formItemLayout">
          <a-form-item label="关键字">
            <a-row :gutter="16">
              <a-col flex="auto">
                <a-input v-model:value="formState.searchKey" placeholder="input placeholder" />
              </a-col>
              <a-col>
                <a-button type="primary">Submit</a-button>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item label="题库">
            <a-radio-group  v-model:value="formState.problemType" size="small">
            <a-row :gutter="16">
              <a-col v-for="(item,index) in problemTypeList" :key="index">
                <a-radio-button :value="item.id">{{item.name}}</a-radio-button>
              </a-col>
            </a-row>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="难度">
            <a-radio-group  v-model:value="formState.difficulty" size="small">
              <a-row :span="24" :gutter="16">
                <a-col style="margin-bottom: 5px" v-for="(item,index) in difficultyList" :key="index">
                  <a-radio-button :style="{color : item.icon}" :value="item.id">{{item.name}}</a-radio-button>
                </a-col>
              </a-row>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-show="formState.tagIds && formState.tagIds.length" label="标签">
              <a-row :span="24" :gutter="5">
                <a-col style="margin-bottom: 5px;cursor: pointer" v-for="item in formState.tagIds" :key="item.id">
                  <a-tag closable  @close="removeTag(item)" :color="item.color">{{item.name}}</a-tag>
                </a-col>
              </a-row>
          </a-form-item>
        </a-form>

        <a-table
            :pagination="pagination"
            @change="handleTableChange"
            :columns="columns"
            :data-source="data">
<!--          <template #bodyCell="{ column, text }">-->
<!--            <template v-if="column.dataIndex === 'name'">-->
<!--              <a>{{ text }}</a>-->
<!--            </template>-->
<!--          </template>-->
        </a-table>
      </a-card>
      </a-col>
    <a-col :xs="0"  :sm="8"  >
      <a-card  class="card" size="small" title="标签" style="width: 100%;margin-bottom: 5px">
        <template #extra><a href="#">more</a></template>
        <a-tag style="cursor: pointer"  @click="addTag(item)" v-for="item in tagList" :key="item.id" :color="item.color">{{item.name}}</a-tag>
      </a-card>
      <a-card  class="card" size="small" title="Small size card" style="width: 100%;position: sticky;top: 80px">
        <a-form :layout="formState.layout" :model="formState" v-bind="formItemLayout">
          <a-form-item label="AC">
            <a-progress :percent="30" />
          </a-form-item>
          <a-form-item label="WA">
            <a-progress :percent="20" />
          </a-form-item>
          <a-form-item label="TLE">
            <a-progress :percent="10" />
          </a-form-item>
          <a-form-item label="RE">
            <a-progress :percent="0" status="exception" />
          </a-form-item>
          <a-form-item label="CE">
            <a-progress :percent="50" status="exception" />
          </a-form-item>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>

import {computed, onMounted, reactive, ref, watch} from 'vue';
import type { UnwrapRef } from 'vue';
import {getProblemTypeList} from "@/api/problemType";
import {getDifficultyList} from "@/api/difficulty";
import {getProblemList} from "@/api/problem";
import {getTagList} from "@/api/tag";
import {debounce} from "@/utils/common";

onMounted(async () => {
  problemTypeList.value = (await getProblemTypeList()).data;
  difficultyList.value = (await getDifficultyList()).data;
  await getProblemList_(formState);
  tagList.value = (await getTagList()).data;
})

//筛选表单
interface FormState {
  layout: 'horizontal' | 'vertical' | 'inline';
  searchKey: string,
  difficulty: string;
  problemType: string;
  tagIds:Array<Tag>,
}
const formState = reactive<FormState>({
  layout: 'horizontal',
  searchKey:'',
  difficulty: '',
  problemType: '',
  tagIds:[]
});
watch(formState, (newVal, oldVal) => {
  // console.log('obj updated:', newVal)
  // const fun = debounce(async () => {
  //   pagination.current = 1
  //   await getProblemList_(formState)
  // })
  // fun();
})
//题库
interface ProblemType {
  id: string | number,
  name:string
}
const problemTypeList = ref<ProblemType>()
const getProblemList_ = async (from: FormState) => {
  const data_ = {
    searchKey: from.searchKey,
    difficultyId: from.difficulty,
    problemTypeId: from.problemType,
    tagIds: from.tagIds.map(item => item.id),
  }
  const params = {
    pageNum:pagination.current,
    pageSize:pagination.pageSize
  }
  const res = await getProblemList(data_,params)
  data.value = res.data.rows;
  pagination.total = res.data.total;
}
//难度
const difficultyList = ref();
//标签
interface Tag {
  id:string,
  name:string,
  color?:string
}
const tagList = ref<Array<Tag>>();
const formItemLayout = computed(() => {
  const { layout } = formState;
  return layout === 'horizontal'
      ? {
        wrapperCol: { span: 22 },
      }
      : {};
});
const addTag = (item:Tag) =>{
  tagList.value = tagList.value.filter(e => e.id !=item.id);
  formState.tagIds.push(item);
}
const removeTag = (item : Tag) =>{
  console.log(item.id)
  const res = formState.tagIds.filter(e => e.id !=item.id)
  formState.tagIds = res;
 // console.log(formState.tagIds)
  tagList.value.push(item)
}
//题目列表
const columns = [
  {
    title: '编号',
    dataIndex: 'problemId',
    key: 'problemId',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '难度',
    dataIndex: 'difficultyName',
    key: 'difficultyName',
    ellipsis: true,
  },
  {
    title: '标签',
    dataIndex: 'tagNames',
    key: 'tagNames',
    ellipsis: true,
  }
];
const data = ref();

const pagination = reactive({
  total: 200,
  current: 1,
  pageSize: 5,
});
//表格改变时触发
const handleTableChange = (p, filters, sorter) => {
  //console.log(p)
  pagination.current = p.current
  getProblemList_(formState)
}
</script>
<style scoped>

</style>
